<template>
	<view>
		<custom-tabs type="c1" :value="tabValue" @change="changeIndex" tabCenter :tabSpacing="85">
			<custom-tab-pane :label="item.label" :name="item.key" v-for="item in tabs" :key="item.key">
				<scroll-view scroll-y="true" class="panel-view">
<!-- 					<view style="margin-bottom: 10px">
						<uni-row :gutter="20">
							<uni-col :span="24">
								<template>
									<u-search
									shape="round"
									placeholder="请输入姓名"
									@search="this.getTaskListData"
									v-model="queryParams.name"
									:show-action="false"
									clearabled
									></u-search>
								</template>
							</uni-col>
						</uni-row>
					</view> -->
					<view>
						<u-list @scrolltolower="scrolltolower">
							<u-list-item v-for="(item, index) in taskListData" :key="item.id">
								<view class="list-item">
									<view style="display: flex; justify-content: space-between">
										<view class="item-line" style="font-size: 16px; font-weight: 900">
											走访对象信息</view>
										<view class="item-status-tag item-status-tag0"
											v-if="item.taskStatus===0">
											<text>待处理</text>
										</view>
										<view class="item-status-tag item-status-tag1"
											v-else-if="item.taskStatus===1">
											<text>已完成</text>
										</view>
										<view class="item-status-tag item-status-tag2"
											v-else-if="item.taskStatus===2">
											<text>已逾期</text>
										</view>
									</view>
									<view style="display: flex; flex-direction: row">
										<view class="item-line">{{ item.name }}</view>
										<view class="item-line">{{ item.visitObject }}</view>
									</view>
									<view class="item-line" style="display: flex; flex-direction: row">
										<u-icon name="map"></u-icon>
										<view>{{ item.location }}</view>
									</view>
									<view class=""
										style="background-color: #f5f8fd; margin: 10px; padding: 10px">
										<u-row :gutter="16">
											<u-col :span="4">
												<view class="item-line"
													style="font-size: 14px; color: #999999">走访时间:</view>
											</u-col>
											<u-col :span="4">
												<view class="">
													{{ item.visitTime }}
												</view>
											</u-col>
										</u-row>
										<u-row :gutter="16">
											<u-col :span="4">
												<view class="item-line"
													style="font-size: 14px; color: #999999">网格员:</view>
											</u-col>
											<u-col :span="4">
												<view class="">
													{{ item.gridUserName }}
												</view>
											</u-col>
										</u-row>
										<u-row :gutter="16">
											<u-col :span="4">
												<view class="item-line"
													style="font-size: 14px; color: #999999">归属社区:</view>
											</u-col>
											<u-col :span="4">
												<view class="">
													{{ item.deptName }}
												</view>
											</u-col>
										</u-row>
										<u-row :gutter="16">
											<u-col :span="4">
												<view class="item-line"
													style="font-size: 14px; color: #999999">所属网格:</view>
											</u-col>
											<u-col :span="4">
												<view class="">
													{{ item.gridName }}
												</view>
											</u-col>
										</u-row>
									</view>
									<view class="item-line" v-if="item.taskStatus === 0">
										<u-button :ripple="true" type="primary" size="medium" shape="circle"
											@click="handelClick(item)">立即处理</u-button>
									</view>
								</view>
							</u-list-item>
              <view v-if="!taskListData.length">
                <u-empty mode="data" margin-top="100">
                </u-empty>
              </view>
            </u-list>
					</view>
				</scroll-view>
			</custom-tab-pane>
		</custom-tabs>
	</view>
</template>

<script>
	import * as TaskApi from '@/api/task.js'
	export default {
		data() {
			return {
				valueData: '',
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					name:''
				},
				taskListData: [],
				total: 0,
				tabValue: '',
				taskStatus: '1',
				tabs: [{
						label: '全部',
						key: 'c1_'
					},
					{
						label: '待处理',
						key: 'c1_0'
					},
					{
						label: '已完成',
						key: 'c1_1'
					}
				]
			}
		},
		created() {
		},
		methods: {
			getTaskListData(reset) {
				const data = {
					...this.queryParams,
					taskStatus: this.taskStatus
				}
				TaskApi.getTaskListData(data).then((res) => {
					this.total = res.data.total
					const list = res.data.list
					this.taskListData = reset ? list : this.taskListData.concat(list)
				})
			},
			changeIndex(e) {
				this.taskStatus = e.name.replace('c1_', '')
				this.queryParams.pageNo = 1
				this.getTaskListData(true)
			},
			handelClick(item) {
				const id = {
					id: item.id,
					residentId: item.residentId
				}
				uni.navigateTo({
					url: `/pages/task/detail/taskIndex?id=${item.id}&residentId=${item.residentId}&type=${item.id}`
				})
			},
			// onReachBottom() {

			// },
			scrolltolower() {


				if (this.taskListData.length >= this.total) return
				this.queryParams={
					...this.queryParams,
						pageNo:this.queryParams.pageNo+1
				}
				this.getTaskListData()

			}
		},
		onLoad() {
			// this.getTaskListData(true)
		},
		onShow() {
			const tabValue = uni.getStorageSync('tabValue') && JSON.parse(uni.getStorageSync('tabValue'))
			console.log('tabValue', tabValue);
			if (tabValue) {
				// uni.$set(this,'tabValue', String(tabValue) )
				this.tabValue = tabValue
				this.taskStatus = 0
				this.queryParams.pageNo = 1
			}
			this.getTaskListData(true)
		},
		onHide() {
			uni.removeStorageSync('tabValue')
		}
	}
</script>

<style lang="scss">
	.panel-view {
		height: 100%;
		padding: 12px 18px;
		background-color: #ffffff;
	}

	.list-item {
		position: relative;
		margin: 5px 0;
		border: 1px solid #ececec;
		border-radius: 20rpx;

		.item-status-tag {
			width: 50px;
			height: 26px;
			//padding:5px 8px;
			border-radius: 0px 4px 0px 10px;
			position: absolute;
			top: 0;
			right: 0;
			font-family: Source Han Sans;
			font-size: 12px;
			font-weight: normal;
			line-height: 26px;
			text-align: center;
			letter-spacing: 0em;
			font-variation-settings: "opsz" auto;
			font-feature-settings: "kern" on;
		}

		;

		.item-status-tag0 {
			color: #3979F9;
			background: #EBF1FF;
			box-shadow: 0px 2px 0px 0px rgba(153, 153, 153, 0.1);
		}

		;

		.item-status-tag1 {
			color: #00B9B3;
			background: #E1F6F5;
			box-shadow: 0px 2px 0px 0px rgba(153, 153, 153, 0.1);
		}

		.item-status-tag2 {
			color: #FF3D3D;
			background: #FFE6E6;
			box-shadow: 0px 2px 0px 0px rgba(153, 153, 153, 0.1);
		}
	}

	.item-line {
		padding: 15rpx 20rpx;

		span {
			margin-right: 20rpx;
			font-size: 14px;
			color: #999999;
		}
	}


	::v-deep .tab .tab-bar {
		height: 90rpx !important;
		white-space: nowrap !important;
		background-color: #fff !important;
	}

	::v-deep.u-button {
		width: 75% !important;
	}
</style>
